<template>
  <div class="goodsListMore-container">
    <TopHeader />
    <div class="test">
      <p> ---------{{checkedCities}}</p>

      <!-- 全选 -->
      <el-checkbox :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>

      <!-- 单选 -->
      <el-checkbox-group v-model="checkedCities"
        @change="handleCheckedCitiesChange">
        <el-checkbox v-for="item in cities"
          :label="item">{{item.name}}</el-checkbox>
      </el-checkbox-group>

    </div>

  </div>
</template>

<script>
//header
import TopHeader from '@/components/modules/header.vue';
//api
import { GetShoppingCatbyUseid } from '@/utils/api/api.js';
export default {
  components: {
    TopHeader,
  },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [
        { id: 232, name: '橘子' },
        { id: 233, name: '苹果' },
        { id: 234, name: '香蕉' },
      ],
      isIndeterminate: true,
    };
  },
  methods: {
    getShoppingCat() {
      GetShoppingCatbyUseid(1).then(resp => {
        this.shoppingCart = resp.msg;
        this.shoppingData = resp.msg.map(item => {
          return item.commodity.name;
        });
        console.log(this.shoppingData);
      });
    },

    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
  created() {
    this.getShoppingCat();
  },
};
</script>

<style lang="scss" scoped>
.test {
  width: 1200px;
  margin: 0 auto;
}
</style>